<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>精美的表格样式</title>
<link rel="stylesheet" type="text/css" media="all" href="/sen-web-demo/css/global.css"  />
<link rel="stylesheet" type="text/css" media="all" href="themes/table/table.css"  />
<script type="text/javascript">
    function ApplyStyle(s){
        document.getElementById("mytab").className=s.innerHTML;
    }
</script>
</head>

<body>
<p>
    <span><a href="table1.html">table1</a></span>&nbsp;|&nbsp;
    <span><a href="table2.html">table2</a></span>&nbsp;|&nbsp;
    <span><a href="table3.html">table3</a></span>&nbsp;|&nbsp;
    <span><a href="table4.html">table4</a></span>&nbsp;|&nbsp;
    <span><a href="table5.html">table5</a></span>&nbsp;|&nbsp;
    <span><a href="table6.html">table6</a></span>&nbsp;|&nbsp;
    <span><a href="table7.html">table7</a></span>&nbsp;|&nbsp;
    <span><a href="table8.html">table8</a></span>&nbsp;|&nbsp;
    <span><a href="table9.html">table9</a></span>&nbsp;|&nbsp;
    <span><a href="table10.html">table10</a></span>&nbsp;|&nbsp;
    <span><a href="table11.html">table11</a></span>&nbsp;|&nbsp;
    <span><a href="table12.html">table12</a></span>&nbsp;|&nbsp;
    <span><a href="table13.html">table13</a></span>&nbsp;|&nbsp;
    <span><a href="table14.html">table14</a></span>&nbsp;|&nbsp;
    <span><a href="table15.html">table15</a></span>&nbsp;|&nbsp;
    <span><a href="table16.html">table16</a></span>&nbsp;|&nbsp;
    <span><a href="table17.html">table17</a></span>&nbsp;|&nbsp;
    <span><a href="table18.html">table18</a></span>&nbsp;|&nbsp;
    <span><a href="table19.html">table19</a></span>&nbsp;|&nbsp;
</p>

<div class="title">
    <h1>大家好，CSS与表格的结合示例</h1>
	<table>
		<tr>
			<td>
				点击链接切换样式：
				<a href="javascript:void(0);" onclick="ApplyStyle(this)">t1</a>
				<a href="javascript:void(0);" onclick="ApplyStyle(this)">t2</a>
				<a href="javascript:void(0);" onclick="ApplyStyle(this)">t3</a>
			</td>
		</tr>
	</table>
</div>

<table width="90%" id="mytab" border="1" class="t1">
	<thead>
		<th width="10%">网名</th>
		<th width="30%">博客</th>
		<th width="20%">电邮</th>
		<th width="30%">网络硬盘</th>
		<th width="10%">QQ</th>
	</thead>
	<tr class="a1">
		<td>wallimn</td>
		<td>http://blog.csdn.net/wallimn</td>
		<td>wallimn@tom.com</td>
		<td>http://wallimn.ys168.com</td>
		<td>54871876</td>
	</tr>
	<tr>
		<td>长三江</td>
		<td>村在</td>
		<td>北京天安门</td>
		<td>东四十条</td>
		<td>21345678</td>
	</tr>
	<tr class="a1">
		<td>长三江</td>
		<td>村在</td>
		<td>北京天安门</td>
		<td>东四十条</td>
		<td>21345678</td>
	</tr>
	<tr>
		<td>长三江</td>
		<td>村在</td>
		<td>北京天安门</td>
		<td>东四十条</td>
		<td>21345678</td>
	</tr>
	<tr class="a1">
		<td>wallimn</td>
		<td>http://blog.csdn.net/wallimn</td>
		<td>wallimn@tom.com</td>
		<td>http://wallimn.ys168.com</td>
		<td>54871876</td>
	</tr>
	<tr>
		<td>长三江</td>
		<td>村在</td>
		<td>北京天安门</td>
		<td>东四十条</td>
		<td>21345678</td>
	</tr>
	<tr class="a1">
		<td>长三江</td>
		<td>村在</td>
		<td>北京天安门</td>
		<td>东四十条</td>
		<td>21345678</td>
	</tr>
	<tr>
		<td>长三江</td>
		<td>村在</td>
		<td>北京天安门</td>
		<td>东四十条</td>
		<td>21345678</td>
	</tr>
</table>
</body>
</html>
